<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="mi.css">
        <style type="text/css">
            body{margin: 0 ;padding: 0;}
        .nav{height: 40px;font-size: 12px;color: #b0b0b0;background: #333;position: relative;}
        .nav-left{;margin-left: 60px;margin-top: 12px;float: left}
            .nav-right{margin-top: 12px;margin-left: 270px;float: left}
         .nav-left-item{float: left;height: 40px;width: 48px;margin-right: 5px;}
            .nav-right-item{float: left;height: 40px;width:34px;margin-right: 4px;line-height: 40px;margin-top: -12px}
            .nav-right-item1{width: 120px;margin-left: 40px;float: left;height: 40px;text-align: center;margin-top: -12px;line-height: 40px;}
            .sep{margin: 0 .3em;display: inline-block;float: left;
                color: #555555;}
            .nav-left-item:hover{color: white}
            .nav-right-item:hover{color: white}
            .nav-right-item1:hover{color: darkorange;background-color: white;}
            .second-line{height: 100px;width: 1349px;}
            .logo{width: 55px;height: 55px;margin-left: 60px;margin-top: 30px;
                background-color: #ff6700;;
                background-image: url("https://s02.mifile.cn/assets/static/image/mi-home.png"),url("https://s02.mifile.cn/assets/static/image/mi-logo.png");
                background-repeat: no-repeat;
                background-position: -55px 0px,0px 0px;
                background-size: contain;
                transition: all 0.2s;}
            .logo:hover{background-position: 0px 0px,-55px 0px;cursor: pointer;}
            .sed-middle{height: 100px;width: 670px;margin-top: -70px;margin-left: 300px;}
            .sed-middle-item{height: 88px;display: inline-block;color: #333333;font-size: 16px;text-align: center;line-height: 100px;}
            .sed-middle-item:hover{color: darkorange}
            .search-button{width: 245px;height: 50px;float: right;margin-top: -80px;margin-right: 50px;;}
            .text{width: 295px;height: 44px;float: right;font-size: 16px;}
            .but2{width: 50px;height: 50px;text-align: center;float: right;margin-top: -50px;}
            .but2:hover{background-color: orange;}
            .search{font-size: 20px;}
            .title{
                width:80%;margin: 0 auto;
                font-size: 22px;
                font-weight: 200;
                line-height: 58px;
                height: 58px;
                color: #333;}
            .all{
                font-size: 16px;margin-top: -58px;
            }
            .wrapper{width: 1226px;
                height: 614px;margin: auto;margin-top: 10px;}
            .spe{
                height: 604px;background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg?thumb=1&w=234&h=614&f=webp&q=90");
                background-size: cover;margin-top: 10px;
            }
            .normal{height: 604px;margin-top: 10px}
            .first{height: 297px;width: 100%;background-color: #e6e6e6;}
            .second{height: 297px;width: 100%;margin-top: 10px;background-color: #e6e6e6;}
            .item{background-image: url("phone.png");background-repeat: no-repeat;
                height: 297px;background-size: cover;}
            .spe:hover{
                margin-top: 5px;
            }
            .item:hover{
                margin-top: -5px;
                box-shadow: 0 5px 10px 5px grey;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <div class="nav-left">
                <div class="nav-left-item" style="width: ">小米商城</div>
                <span class="sep">|</span>
                <div class="nav-left-item" style="width:25.34px ">MIUI</div>
                <span class="sep">|</span>
                <div class="nav-left-item" style="width: 17.34px">loT</div>
                <span class="sep">|</span>
                <div class="nav-left-item" style="width: 36px">云服务</div>
                <span class="sep">|</span>
                <div class="nav-left-item" style="width: 24px">金融</div>
                <span class="sep">|</span>
                <div class="nav-left-item" style="width: 24px">有品</div>
                <span class="sep">|</span>
                <div class="nav-left-item" style="width: 72px">小爱开放平台</div>
                <span class="sep">|</span>
                <div class="nav-left-item" style="width: ">企业团购</div>
                <span class="sep">|</span>
                <div class="nav-left-item" style="width: ">资格证照</div>
                <span class="sep">|</span>
                <div class="nav-left-item" style="width: ">协议规则</div>
                <span class="sep">|</span>
                <div class="nav-left-item" style="width: 46px">下载app</div>
                <span class="sep">|</span>
                <div class="nav-left-item" style="width:82.06px ">select lacation</div>
            </div>
            <div class= "nav-right">
                <div class="nav-right-item">登入</div>
                <span class="sep" >|</span>
                <div class="nav-right-item">注册</div>
                <span class="sep">|</span>
                <div class="nav-right-item" style="width: 48px">消息通知</div>
                <div class="nav-right-item1" >
                    <li class="fa fa-shopping-cart" style="font-size: 16px"></li>
                    购物车(0)</div>
            </div>
        </div>
            <div class="second-line">
                    <div class="logo"></div>
                        <div class="sed-middle">
                            <span class="sed-middle-item"style="width: 84px">小米手机</span>
                            <span class="sed-middle-item"style="width: 102.69px">Red&nbsp;红米</span>
                            <span class="sed-middle-item"style="width: 52px">电视</span>
                            <span class="sed-middle-item"style="width: 68px">笔记本</span>
                            <span class="sed-middle-item"style="width:52px ">家电</span>
                            <span class="sed-middle-item"style="width:68px ">路由器</span>
                            <span class="sed-middle-item"style="width:84px ">智能硬件</span>
                            <span class="sed-middle-item"style="width:52px ">服务</span>
                            <span class="sed-middle-item"style="width:52px ">社区</span>
                        </div>
                                <div class="search-button">
                                    <input type="text" class="text">
                                    <button type="submit" class="but2">
                                        <i class="fa fa-search search"></i>
                                    </button>
                                </div>
            </div>
        <div class="title">
            <div class="phone">手机</div>
            <div class="all offset-10-9">查看全部></div>
        </div>
                <div class="wrapper">
                    <div class="spe cell-8-2"></div>
                    <div class="normal cell-8-6">
                        <div class="first">
                            <div class="item cell-4-1"></div>
                            <div class="item cell-4-1"></div>
                            <div class="item cell-4-1"></div>
                            <div class="item cell-4-1"></div>
                        </div>
                        <div class="second">
                            <div class="item cell-4-1"></div>
                            <div class="item cell-4-1"></div>
                            <div class="item cell-4-1"></div>
                            <div class="item cell-4-1"></div>
                        </div>
                    </div>
                </div>
    </body>
</html>